<style>
.x-center {
    text-align: center;
}

.dataTest {
    width: 50%;
    margin-left: 24%;
    height: 200px;
    margin-top: 20px;
    overflow: auto
}

/* 自定义滚动条样式 */
.dataTest::-webkit-scrollbar {
    width: 5px;
    height: 6px;
}
</style>


<template>
    <h2 class="x-center">搜索页</h2>
    <br/>

    <div class="x-center">
        搜索
        <el-input v-model="input" style="width: 240px;margin-top: 5px" placeholder=""/>
        <el-button type="primary" style="margin-top: 5px" @click="search(input)">搜索</el-button>
    </div>
    <div class="x-center" style="margin-top: 20px;margin-bottom: 20px">下发搜索返回数据:</div>
    <div>
        <div v-for="(item,index) in searchResData.data.data.records">
            <el-card style="width: 96%">
                <h3 v-html="item.name"></h3>
                <div v-html="item.describe "></div>
            </el-card>
        </div>
    </div>

</template>

<script setup lang="ts">
definePageMeta({
    path: '/search.html'
})
const input = ref("")
const searchResData = ref({
    data: {
        data: {
            records: []
        }
    }
})

/**
 * 搜索数据, 当前只在客户端点击触发
 */
const search = async (keyword) => {
    console.log("search方法触发")
    searchResData.value = await httpGet("/api/client/all/article/keywordList?size=10&type=2&keyword=" + keyword)
}

</script>


<style scoped>

</style>